<template>
    <div id="wrap">
       <div class="head">
         <span class="iconfont icon-down-jiantou-right" @click="fun()"></span>
         <span>共享办公</span>
         <span class="iconfont icon-fenxiang"  @click="showShare = true"></span>
       </div>

       <div class="content">
            <List></List>
            <div class="weWork">
                <div>
                    <h2>好世界-WeWork</h2>
                     <span>朝阳-朝青</span>
                </div>
                <div>
                    <h3>2400元/工位/月起</h3>
                    <span>工位数：1-68个</span>
                </div>
            </div>
             <div class="distance">
                 <div>
                     <span class="iconfont icon-tubiao_ditu"></span><span>[朝阳-朝青]好世界3F</span>
                 </div>
                 <p>距离地铁10号线;地铁六号线呼家楼站440m</p>
                 <p>距离地铁十号线今台照站598m</p>
                 <p>距离地铁六号线东大桥站1276m</p>
             </div>
             <div class="out">
                  <h2>好世界-WeWork出租</h2>
                  <Out></Out>
             </div>
             <div class="item">
                  <h2>项目简介</h2>
                  <p>
                      10万吨/年高纯氢氧化镁项目以水氯镁石为主要原料，采用氨-石灰联合法生产高纯氢氧化镁，项目总投资5.58亿元，2011年3月开工建设，2013年6月建成投产。高纯氢氧化镁滤饼是含水分的中间体，不能直接面向市场销售，需要进行深加工，为此，公司实施了与其配套的下游产品项目。下游产品项目以高纯氢氧化镁滤饼为原料，采用闪蒸干燥、旋流动态煅烧、电熔、重烧等工艺，生产镁系列产品，项目总投资1.98亿元，2013年3月动工建设，目前干燥、氧化镁、电熔设备安装和调试已经完成，产品已经下线，重烧工序正在进行工程收尾工作。上述两个项目建成后，公司最终产品产能分别为：2.5万吨/年高纯氢氧化镁、2万吨/年高纯氧化镁、1.5万吨/年高纯烧结镁砂和1.5万吨/年高纯电熔镁砂。
                  </p>
             </div>
             <div class="serve">
                 <h2>基础服务</h2>
                 <Jichu v-for="(v,i) in arr" :key="i" :serve="v"></Jichu>
             </div>
       </div>
       <!-- 弹出层 -->
      <div>
          <van-cell title="" />
            <van-share-sheet
            v-model="showShare"
            title="立即分享给好友"
            :options="options"
            @select="onSelect"
            />
      </div>
    </div>
</template>

<script>
import List from "@/components/sharelist/list.vue"
import Out from "@/components/sharelist/out.vue"
import Jichu from "@/components/sharelist/jichu.vue"
import { Toast } from 'vant'

export default {
    
    components:{
        List,
        Out,
        Jichu,
       
    },
    data(){
        return{
            arr:["前台节俭","办公家具","复印打印","办公宽带","WIFI","会议室","洽谈室","视频会议","多功能厅","咖啡厅","茶水间","休闲区","卫生配套","办公清洁","茶点","免费咖啡","饮用水"],
           showShare: false,
      bool:"",
      options: [
        { name: '微信', icon: 'wechat' },
        { name: '微博', icon: 'weibo' },
        { name: '复制链接', icon: 'link' },
        { name: '分享海报', icon: 'poster' },
        { name: '二维码', icon: 'qrcode' },
      ],
        }
    },
    methods:{
        fun(){
            this.$router.go(-1)
        },
        onSelect(option) {
      Toast(option.name);
      this.showShare = false;
    },
    }
}
</script>

<style scoped>
    #wrap{
        display: flex;
        flex-direction: column;
        height: 100vh;
    }
   .head{
       height: 0.8rem;
       display: flex;
       justify-content: space-between;
       align-items: center;
       padding: 0 0.14rem;
       /* font-size: 18px; */
       font-weight: bold;
      
   }
   .head span{
      font-size: 0.18rem;
   }
   .content{
       overflow-y: auto;
   }
   .weWork{
       height: 1.47rem;
       border-bottom: 0.01rem solid #f0f1f4;
       display: flex;
       flex-direction: column;
       justify-content: space-evenly;
       margin:0 0.14rem;
      
   }
    .weWork h2,h3{
        font-size: 0.2rem;
    }
    .weWork h3{
        color: red;
    }
    .weWork span{
        color: #959595;
        font-size: 0.15rem;
    }
    .distance{
        font-size: 0.12rem;
        color: #c7cbd0;
        height: 1.3rem;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
        margin:0 0.14rem;
       
    }
    .distanc p{
        margin-top: 0.09rem;
    }
    .distanc span{
        display: inline-block;
    }
    .out h2{
        margin-left: 0.15rem;
    }
    .item{
        margin:0 0.15rem;
    }
    .item h2{
        font-size: 0.19rem;
        margin-bottom: 0.2rem;
    }
    .item p{
        font-size: 0.15rem;
        font-weight: 100;
    }
    .serve{
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        margin:0 0.14rem;
        margin-top: 0.2rem;
    }
    .serve h2{
        width: 100%;
        font-size: 0.15rem;
        font-weight: bold;
        margin-bottom: 0.1rem;
    }
    .serve .data-v-71bbee1f{
        margin-bottom: 0.1rem;
    }
</style>